[class^="iconfont"],
[class*="iconfont"] {
    cursor: pointer;
    display: inline-block;
    color: $--icon-color;
    font-size: $--font-size-base;
    background-color: transparent;
    
}

[class^="el-icon"],
[class*="el-icon"] {
    color: $--icon-color ;
    &:hover {
        color: $--icon-color;
        text-align: center;
        box-sizing: border-box;
    }

}

.cl-iconfont{
    font-size: $--font-size-base;
    padding: 8px;
    line-height: 1;
    color:$--color-text-regular;
    &.is-circle {
        &:hover {
            color:$--color-text-regular;
            background-color: $--icon-hover-color;
            border-radius: $--border-radius-circle;
        }
    }
    &.is-square {
        &:hover {
            background-color: $--icon-hover-color;
            border-radius:$--border-radius-base;
        }
    }
}